<template>
	<view class="calendar-container">
		<scroll-view class="calendar-scroll" scroll-y>
			<view class="calendar-header">
				<view class="month-selector">
					<view class="arrow-btn" @click="prevMonth">
						<uni-icons type="left" size="24" color="#333"></uni-icons>
					</view>
					<text class="current-month">{{ currentYear }}年{{ currentMonth + 1 }}月</text>
					<view class="arrow-btn" @click="nextMonth">
						<uni-icons type="right" size="24" color="#333"></uni-icons>
					</view>
				</view>
				<view class="week-days">
					<text v-for="(day, index) in weekDays" :key="index" class="week-day">{{ day }}</text>
				</view>
			</view>

			<view class="calendar-body">
				<view v-for="(day, index) in calendarDays" :key="index" class="day-cell" :class="{
            'empty': !day.date,
            'disabled': day.disabled,
            'selected': isDateSelected(day.date),
            'check-in': isCheckInDate(day.date),
            'check-out': isCheckOutDate(day.date),
            'in-range': isInSelectedRange(day.date)
          }" @click="selectDate(day)">
					<view v-if="day.date" class="day-content">
						<text class="day-number">{{ formatDayNumber(day.date) }}</text>
						<text v-if="day.price" class="day-price">¥{{ day.price }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="calendar-footer">
			<view class="date-range-info">
				<view class="date-info">
					<text class="date-label">入住</text>
					<text class="date-value">{{ checkInDateFormatted || '请选择' }}</text>
				</view>
				<view class="stay-nights">
					<text>{{ stayNights }}晚</text>
				</view>
				<view class="date-info">
					<text class="date-label">离店</text>
					<text class="date-value">{{ checkOutDateFormatted || '请选择' }}</text>
				</view>
			</view>
			<button class="confirm-btn" :disabled="!canConfirm" @click="confirmSelection">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MultiPlatformCalendar',
		props: {
			initialCheckInDate: {
				type: String,
				default: ''
			},
			initialCheckOutDate: {
				type: String,
				default: ''
			},
			priceData: {
				type: Object,
				default: () => ({})
			},
			type: {
				type: Number,
				default: 0 // 0-普通，1-特惠房型
			}
		},
		data() {
			const today = new Date();
			return {
				weekDays: ['日', '一', '二', '三', '四', '五', '六'],
				currentYear: today.getFullYear(),
				currentMonth: today.getMonth(),
				checkInDate: this.initialCheckInDate || '',
				checkOutDate: this.initialCheckOutDate || '',
				selectionMode: 'checkIn', // 'checkIn' 或 'checkOut'
				today: today
			};
		},
		computed: {
			oneMonthLater() {
				const date = new Date(this.today);
				date.setMonth(date.getMonth() + 1);
				return date;
			},
			checkInDateFormatted() {
				return this.formatDate(this.checkInDate);
			},
			checkOutDateFormatted() {
				return this.formatDate(this.checkOutDate);
			},
			stayNights() {
				if (!this.checkInDate || !this.checkOutDate) return 0;
				const start = new Date(this.checkInDate);
				const end = new Date(this.checkOutDate);
				return Math.round((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
			},
			canConfirm() {
				if (!this.checkInDate || !this.checkOutDate) return false;
				if (this.type === 1 && this.stayNights > 3) return false;
				return true;
			},
			calendarDays() {
				const days = [];
				const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
				const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();

				for (let i = 0; i < firstDay; i++) {
					days.push({
						date: null,
						disabled: true
					});
				}
				console.log(this.priceData,"this.priceData");
				for (let i = 1; i <= daysInMonth; i++) {
					const dateStr = `${this.currentYear}-${this.currentMonth + 1}-${i}`;
					days.push({
						date: dateStr,
						price: this.priceData[dateStr]?.price || null,
						disabled: this.isDateDisabled(dateStr),
					});
				}

				return days;
			}
		},
		methods: {
			formatDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				return `${date.getMonth() + 1}月${date.getDate()}日`;
			},
			formatDayNumber(dateStr) {
				return new Date(dateStr).getDate();
			},
			isDateDisabled(dateStr) {
				const date = new Date(dateStr);
				if (this.type === 1) {
					return date < this.oneMonthLater;
				}
				return false;
			},
			isDateSelected(dateStr) {
				return dateStr === this.checkInDate || dateStr === this.checkOutDate;
			},
			isCheckInDate(dateStr) {
				return dateStr === this.checkInDate;
			},
			isCheckOutDate(dateStr) {
				return dateStr === this.checkOutDate;
			},
			isInSelectedRange(dateStr) {
				if (!this.checkInDate || !this.checkOutDate) return false;
				const start = new Date(this.checkInDate);
				const end = new Date(this.checkOutDate);
				const current = new Date(dateStr);
				return current > start && current < end;
			},
			selectDate(day) {
				if (!day.date || day.disabled) return;
				if (this.selectionMode === 'checkIn') {
					this.checkInDate = day.date;
					this.selectionMode = 'checkOut';
				} else {
					const inDate = new Date(this.checkInDate);
					const outDate = new Date(day.date);
					if (outDate <= inDate) {
						this.checkOutDate = '';
						return;
					}
					this.checkOutDate = day.date;
					this.selectionMode = 'checkIn';
				}
			},
			prevMonth() {
				if (this.currentMonth === 0) {
					this.currentYear--;
					this.currentMonth = 11;
				} else {
					this.currentMonth--;
				}
			},
			nextMonth() {
				if (this.currentMonth === 11) {
					this.currentYear++;
					this.currentMonth = 0;
				} else {
					this.currentMonth++;
				}
			},
			confirmSelection() {
				if (!this.canConfirm) return;
				this.$emit('confirm', {
					checkInDate: this.checkInDate,
					checkOutDate: this.checkOutDate,
					nights: this.stayNights
				});
			}
		}
	};
</script>

<style scoped>
	.calendar-container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.calendar-scroll {
		flex: 1;
		overflow-y: auto;
		/* 允许垂直滚动 */
	}

	.calendar-header {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.month-selector {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.current-month {
		font-size: 28rpx;
		margin: 0 20rpx;
	}

	.week-days {
		/* display: flex;
		justify-content: space-between; */
		display: grid;
		grid-template-columns: repeat(7,1fr);
		width: 100%;
	}

	.week-day {
		font-size: 24rpx;
		color: #333;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.calendar-body {
		display: grid;
		grid-template-columns: repeat(7,1fr);
		/* display: flex;
		flex-wrap: wrap;
		justify-content: space-between; */
	}

	.day-cell {
		width: 100%;
		margin-bottom: 10rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.empty {
		visibility: hidden;
	}

	.disabled {
		opacity: 0.5;
	}

	.selected {
		background-color: #FF6B23;
		color: #fff;
	}

	.check-in {
		background-color: #FF6B23;
		color: #fff;
	}

	.check-out {
		background-color: #FF6B23;
		color: #fff;
	}

	.in-range {
		background-color: rgba(255, 107, 35, 0.3);
	}

	.day-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.day-number {
		font-size: 28rpx;
	}

	.day-price {
		font-size: 20rpx;
		color: #FF6B23;
	}

	.calendar-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.date-range-info {
		display: flex;
		flex-direction: column;
	}

	.date-label {
		font-size: 24rpx;
		color: #999;
	}

	.date-value {
		font-size: 28rpx;
		color: #333;
	}

	.confirm-btn {
		background-color: #FF6B23;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
	}
</style>